<template>
	<div class="root">
	<footer class="footers">
		<div class="contents" v-for="(item,index) in list" :class="index == sort ? 'active':''" @click="active(item,index)">
			<i :class="item.icon"></i>
			<p>{{item.title}}</p>
		</div>
	</footer>
</div>
</template>

<script>
import {data} from '@/common/js/shop'
	export default {
		name:'root',
		props:{
			sort:{
				type:Number,
				default:0
			}
		},
		data () {
			return {
				list:data.titleList,
			}
		},
		mounted () {
		},
		methods:{
			active (item,index) {
				this.$router.push(item.path)
			}
		}
	}
</script>

<style lang="less" scoped>
     .root{
     	width:100%;
     	.footers{
     		width:100%;
     		position: fixed;
     		bottom: 0;
     		left: 0;
     		z-index: 88;
     		height: 100px;
     		background: #FFFFFF;
     		justify-content: center;
     		align-items: center;
     		display: -webkit-flex;    		
     		line-height: 36px;    
     		.contents{
     			flex: 1;
     			margin-top: 10px;
     			text-align: center;
                &.active{
                	color: rgb(78,187,183);
                }
     			.icon{
     			   font-size: 48px;
     		  } 
     		  p{
     		  	font-size: 24px;
     		  }		
     		}
     	}
     }
</style>